<template>
  <div class="auto-control">
    <HSLControl />
    <HSVControl />
    <RGBControl />
    <XYZControl />
    <CMYKControl />
  </div>
</template>

<script>
import CMYKControl from './CMYK/index.vue';
import HSVControl from './HSV/index.vue';
import RGBControl from './RGB/index.vue';
import XYZControl from './XYZ/index.vue';
import HSLControl from './HSL/index.vue';
export default {
  name: "index",
  components: { CMYKControl,HSVControl,RGBControl,XYZControl,HSLControl }
}
</script>

<style scoped lang="scss">

.auto-control {
  width: 42%;
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

</style>
